<template>
  <f7-page>
    <f7-navbar large title="主题颜色" back-link="返回"></f7-navbar>
    <f7-block-title medium>布局主题</f7-block-title>
    <f7-block strong>
      <p>目前系统提供2种布局主题：亮色和暗色</p>
      <f7-row>
        <f7-col
          width="50"
          class="bg-color-white demo-theme-picker"
          @click="setLayoutTheme('light')"
        >
          <f7-checkbox checked disabled v-if="theme === 'light'" />
        </f7-col>
        <f7-col width="50" class="bg-color-black demo-theme-picker" @click="setLayoutTheme('dark')">
          <f7-checkbox checked disabled v-if="theme === 'dark'" />
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-block-title medium>导航栏样式</f7-block-title>
    <f7-block strong>
      <p>选择导航栏样式:</p>
      <f7-row>
        <f7-col
          width="50"
          class="demo-bars-picker demo-bars-picker-empty"
          @click="setBarsStyle('empty')"
        >
          <div class="demo-navbar"></div>
          <f7-checkbox checked disabled v-if="barsStyle === 'empty'" />
        </f7-col>
        <f7-col
          width="50"
          class="demo-bars-picker demo-bars-picker-fill"
          @click="setBarsStyle('fill')"
        >
          <div class="demo-navbar"></div>
          <f7-checkbox checked disabled v-if="barsStyle === 'fill'" />
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-block-title medium>字体颜色</f7-block-title>
    <f7-block strong>
      <p>系统提供了 {{colors.length}} 字体颜色可供选择.</p>
      <f7-row>
        <f7-col
          width="33"
          tabletWidth="25"
          desktopWidth="20"
          v-for="(color, index) in colors"
          :key="index"
        >
          <f7-button
            fill
            round
            small
            class="demo-color-picker-button"
            :color="color"
            @click="setColorTheme(color)"
          >{{color}}</f7-button>
        </f7-col>
        <f7-col width="33" tabletWidth="25" desktopWidth="20" />
        <f7-col width="33" tabletWidth="25" desktopWidth="20" />
        <f7-col width="33" tabletWidth="25" desktopWidth="20" />
      </f7-row>
    </f7-block>
    <f7-block-title medium>当然你也可以自定义字体颜色</f7-block-title>
    <f7-list>
      <f7-list-input
        type="colorpicker"
        label="16进制颜色代码"
        placeholder="e.g. #ff0000"
        readonly
        :value="{hex: customColor || themeColor}"
        :color-picker-params="{
          targetEl: '#color-theme-picker-color',
        }"
        @colorpicker:change="value => setCustomColor(value.hex)"
      >
        <div
          slot="media"
          id="color-theme-picker-color"
          style="width: 28px; height: 28px; border-radius: 4px; background: var(--f7-theme-color)"
        ></div>
      </f7-list-input>
    </f7-list>

    <!-- <f7-block-title medium>Generated CSS Variables</f7-block-title>
    <f7-block strong>
      <template v-if="customProperties">
        <p>Add this code block to your custom stylesheet:</p>
        <pre style="overflow: auto; -webkit-overflow-scrolling: touch; margin: 0; font-size: 12px;">{{customProperties}}</pre>
      </template>
      <p
        v-else
      >Change navigation bars styles or specify custom color to see custom CSS variables here</p>
    </f7-block> -->
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Button,
  f7Row,
  f7Col,
  f7Block,
  f7List,
  f7ListInput,
  f7Checkbox
} from "framework7-vue";
var stylesheet;
var globalTheme = "light";
var globalBarsStyle = "empty";
var globalCustomColor = "";
var globalCustomProperties = "";
export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Button,
    f7Row,
    f7Col,
    f7Block,
    f7List,
    f7ListInput,
    f7Checkbox
  },
  data: function() {
    var colors = [
      "red",
      "green",
      "blue",
      "pink",
      "yellow",
      "orange",
      "purple",
      "deeppurple",
      "lightblue",
      "teal",
      "lime",
      "deeporange",
      "gray",
      "black"
    ];
    return {
      theme: globalTheme,
      barsStyle: globalBarsStyle,
      customColor: globalCustomColor,
      customProperties: globalCustomProperties,
      colors: colors,
      themeColor: this.$$("html")
        .css("--f7-theme-color")
        .trim()
    };
  },
  mounted() {
    if (!stylesheet) {
      stylesheet = document.createElement("style");
      document.head.appendChild(stylesheet);
    }
  },
  methods: {
    generateStylesheet() {
      var self = this;
      var styles = "";
      if (self.customColor) {
        const colorThemeProperties = self.$f7.utils.colorThemeCSSProperties(
          self.customColor
        );
        if (Object.keys(colorThemeProperties).length) {
          styles += `
/* Custom color theme */
:root {
  ${Object.keys(colorThemeProperties)
    .map(key => `${key}: ${colorThemeProperties[key]};`)
    .join("\n  ")}
}`;
        }
      }
      if (self.barsStyle === "fill") {
        const colorThemeRgb = self
          .$$("html")
          .css("--f7-theme-color-rgb")
          .trim()
          .split(",")
          .map(c => c.trim());
        styles += `
/* Invert navigation bars to fill style */
:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
}
.navbar-large-transparent {
  --f7-navbar-large-title-text-color: #000;
  --r: ${colorThemeRgb[0]};
  --g: ${colorThemeRgb[1]};
  --b: ${colorThemeRgb[2]};
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}
.theme-dark .navbar-large-transparent {
  --f7-navbar-large-title-text-color: #fff;
}
          `;
      }
      return styles.trim();
    },
    setLayoutTheme: function(theme) {
      var self = this;
      var $html = self.$$("html");
      globalTheme = theme;
      $html
        .removeClass("theme-dark theme-light")
        .addClass("theme-" + globalTheme);
      self.theme = globalTheme;
    },
    setColorTheme: function(color) {
      var self = this;
      var $html = self.$$("html");
      var currentColorClass = $html[0].className.match(/color-theme-([a-z]*)/);
      if (currentColorClass) $html.removeClass(currentColorClass[0]);
      $html.addClass("color-theme-" + color);
      self.unsetCustomColor();
      self.themeColor = $html.css("--f7-color-" + color).trim();
    },
    setBarsStyle: function(barsStyle) {
      var self = this;
      globalBarsStyle = barsStyle;
      self.barsStyle = globalBarsStyle;
      globalCustomProperties = self.generateStylesheet();
      stylesheet.innerHTML = globalCustomProperties;
      self.customProperties = globalCustomProperties;
    },
    unsetCustomColor: function() {
      var self = this;
      globalCustomColor = "";
      self.customColor = "";
      globalCustomProperties = self.generateStylesheet();
      stylesheet.innerHTML = globalCustomProperties;
      self.customProperties = globalCustomProperties;
    },
    setCustomColor: function(color) {
      var self = this;
      if (self.themeColor === color) return;
      clearTimeout(self.timeout);
      self.timeout = setTimeout(() => {
        globalCustomColor = color;
        self.customColor = globalCustomColor;
        globalCustomProperties = self.generateStylesheet();
        stylesheet.innerHTML = globalCustomProperties;
        self.customProperties = globalCustomProperties;
      }, 300);
    }
  }
};
</script>
<style scoped>

.demo-theme-picker {
    cursor: pointer;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    border: 1px solid rgba(255,255,255,.2);
    box-sizing: border-box;
    position: relative
}

.demo-theme-picker .checkbox {
    position: absolute;
    left: 10px;
    bottom: 10px
}

.demo-color-picker-button {
    margin-bottom: 1em;
    text-transform: capitalize
}

.demo-bars-picker {
    height: 200px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--f7-page-bg-color);
    border: 1px solid rgba(255,255,255,.2)
}

.demo-bars-picker .checkbox {
    position: absolute;
    left: 10px;
    bottom: 10px
}

.demo-bars-picker .demo-navbar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 30px;
    top: 0;
    border-bottom: 1px solid transparent
}

.demo-bars-picker .demo-navbar:before {
    content: '';
    position: absolute;
    left: 10px;
    width: 20px;
    height: 10px;
    top: 50%;
    margin-top: -5px
}

.demo-bars-picker .demo-navbar:after {
    content: '';
    position: absolute;
    right: 10px;
    width: 20px;
    height: 10px;
    top: 50%;
    margin-top: -5px
}

.demo-bars-picker-empty .demo-navbar {
    background: #f7f7f8;
    border-color: rgba(0,0,0,.1)
}

.theme-dark .demo-bars-picker-empty .demo-navbar {
    background: #1b1b1b;
    border-color: #282829
}

.demo-bars-picker-empty .demo-navbar:before,.demo-bars-picker-empty .demo-navbar:after {
    background: var(--f7-theme-color)
}

.demo-bars-picker-fill .demo-navbar {
    background: var(--f7-theme-color)
}

.demo-bars-picker-fill .demo-navbar:before,.demo-bars-picker-fill .demo-navbar:after {
    background: #fff
}

</style>

<style lang="less" scoped>
::v-deep {
  .navbar {
    height: calc(88px * var(--ratio));

    .navbar-inner {
      padding-left: calc(34px * var(--ratio));
      padding-right: calc(38px * var(--ratio));
      background-color: var(--bg-color);

      .left {
        .link {
          padding: 0;
          width: auto;
          color: var(--color);
        }
      }

      .title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: var(--color);
        font-size: var(--font-size-maintitle);
      }
    }

    .navbar-bg {
      &::before,&::after {
        content: none;
      }
    }
  }
}
</style>